<template>
	<view class="">
		<view class="indexHeaBox">
			<view class="leftImg" @click="open2">
				<image v-if="$i18n.locale == 'ft'" src="../../static/img/zh.png" alt=""></image>
				<image v-if="$i18n.locale == 'en'" src="../../static/img/en.png" alt=""></image>
				<image v-if="$i18n.locale == 'jp'" src="../../static/img/rb.png" alt=""></image>
				<image v-if="$i18n.locale == 'ko'" src="../../static/img/hg.png" alt=""></image>
				<image v-if="$i18n.locale == 'zh'" src="../../static/img/zh.png" alt=""></image>
				<p v-if="$i18n.locale == 'ft'">港澳繁體</p>
				<p v-if="$i18n.locale == 'en'">English</p>
				<p v-if="$i18n.locale == 'jp'">にほんご</p>
				<p v-if="$i18n.locale == 'ko'">한국어</p>
				<p v-if="$i18n.locale == 'zh'">中文简体</p>
			</view>
			<view class="mask2" v-if="show2">
				<view @click="lang('en')">
					<img src="../../static/img/en.png" alt="">
					<text>English</text>
				</view>
				<view @click="lang('ft')">
					<img src="../../static/img/zh.png" alt="">
					<text>港澳繁體</text>
				</view>
				<view @click="lang('zh')">
					<img src="../../static/img/zh.png" alt="">
					<text>中文简体</text>
				</view>
				<view @click="lang('jp')">
					<img src="../../static/img/rb.png" alt="">
					<text>にほんご</text>
				</view>
				<view @click="lang('ko')">
					<img src="../../static/img/hg.png" alt="">
					<text>한국어</text>
				</view>
			</view>
			<view class="rightImg">
				<!-- <image @click="goPage('../recentNews/index')" src="../../static/images/41.png" mode=""></image>
				<view class="rightImgLine"></view> -->
				<image @click="islogin()" src="../../static/images/23.png" mode=""></image>
				<view v-if="info.email" class="rightImgName">
					{{info ? info.email : $t('login.title35')}}
				</view>
				<image @click="loginouts()" class="logout" src="../../static/images/logout.png" mode=""></image>
			</view>
			<view class="sjhsuid">
				UID：{{info ? info.uid : ""}}
			</view>
		</view>
		<view class="indexNav">
			<view class="indexNavIt" v-for="(item,index) in navList" :key="index" @click="goPage(item.path)">
				<image :src="item.img" mode=""></image>
				{{item.title}}
			</view>
		</view>
		<view class="linehjghj">
			<view class="lineLeft">
		
			</view>
		</view>
		<view class="tongjiBox">
			<view class="tongjiBoxTitle">
				{{$t('indexTitle.title1')}}
			</view>
			<view class="tongjiNav">
				<div class="conNavOneItdada">
					<div class="conNavOneItRiButs">
						<u-button type="primary" :custom-style="customStyleOne" size="mini"
							@click="gocunkuan()">{{$t('indexTitle.title3')}}</u-button>
						<u-button type="primary" :custom-style="customStyleThree" size="mini"
							@click="gozhuanzhang(0)">{{$t('indexTitle.title4')}}</u-button>
					</div>
					<view class="conNavOneItRiBut" @click="gorecord(1)">
						<img src="../../static/images/55.png" alt="">
						<div class="conNavOneItRi">
							<p>{{$t('allocation.title10')}}</p>
							<p>{{balance[0] || '0.00'}} <br />USD</p>
						</div>
					</view>
				</div>
				<div class="conNavOneItdada" style="background-color: #ffca93;">
					<div class="conNavOneItRiButs">
						<u-button type="primary" :custom-style="customStyleOne" size="mini"
							@click="gotixian(0)">{{$t('indexTitle.title4s')}}</u-button>
						<u-button type="primary" :custom-style="customStyleThree" size="mini"
							@click="gozhuanzhang(1)">{{$t('indexTitle.title4')}}</u-button>
					</div>
					<view class="conNavOneItRiBut" @click="gorecord(2)">
						<img src="../../static/images/55.png" alt="">
						<div class="conNavOneItRi">
							<p>{{$t('allocation.title11')}}</p>
							<p>{{balance[1] || '0.00'}} <br />USD</p>
						</div>
					</view>
				</div>
				<div class="conNavOneItdada" style="background-color: #8ec8fa;">
					<div class="conNavOneItRiButs">
						<u-button type="primary" :custom-style="customStyleOne" size="mini"
							@click="gotixian(1)">{{$t('indexTitle.title4s')}}</u-button>
						<u-button type="primary" :custom-style="customStyleThree" size="mini"
							@click="gozhuanzhang(2)">{{$t('indexTitle.title4')}}</u-button>
					</div>
					<view class="conNavOneItRiBut" @click="gorecord(3)">
						<img src="../../static/images/55.png" alt="">
						<div class="conNavOneItRi">
							<p>{{$t('allocation.title12')}}</p>
							<p>{{balance[2] || '0.00'}} <br />USD</p>
						</div>
					</view>
				</div>
				<!-- <div class="conNavOneItdada" style="background-color: #277af5;">
					<img src="../../static/images/55.png" alt="">
					<div class="conNavOneItRi">
						<p>{{$t('allocation.title13')}}</p>
						<p>{{balance[3] || '0.00'}} USD</p>
						<div class="conNavOneItRiBut">
							<u-button type="primary" :custom-style="customStyleThree" size="mini" style="width: 96rpx;"
								@click="gozhuanzhang(3)">{{$t('indexTitle.title4')}}</u-button>
						</div>
					</div>
				</div> -->
			</view>
		</view>
		<view class="conLineBox"></view>

		<view class="conTitOneTit">
			<span @click="govip()">{{$t('vipStructure.title1')}}</span>
			<span class="color">{{$t('instruPanel.title1')}}</span>
		</view>
		<!-- <view class="yonghuziliaoBox">
			{{$t('instruPanel.title2')}}
		</view> -->
		<view class="ziliaoBox">
			<view class="zilTop">
				<view class="zilTopL">
					<!-- <view class="zilTopLTop">
						<p>{{$t('instruPanel.title3')}}</p>
						<image src="../../static/images/49.png" alt=""></image>
						<p>2024-04-252024-04-25</p>
					</view> -->
					<view class="zilTopLBot">
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
						</view>
					</view>
				</view>
				<view class="zilTopR">
					<view class="zilTopRIt">
						<p>{{vipinfo.day}} USD</p>
						<p>{{$t('instruPanel.title4')}}</p>
					</view>
					<view class="zilTopRIt">
						<p>{{vipinfo.week}} USD</p>
						<p>{{$t('instruPanel.title5')}}</p>
					</view>
					<view class="zilTopRIt">
						<p>{{vipinfo.month}} USD</p>
						<p>{{$t('instruPanel.title6')}}</p>
					</view>
				</view>
			</view>
			<!-- <view class="zilBot">
				<view class="conNavOneItRiBut">
					<view style="width: 25%;">
						<u-button type="primary" :custom-style="customStyleOne"
							size="mini">{{$t('instruPanel.title7')}}</u-button>
					</view>
				</view>
				<view class="huiyaunshu">
					<view class="huiyaunshuIt">
						<p>{{$t('instruPanel.title8')}}</p>
						<view class="huiyaunshuItNum">
							{{vipinfo.invite_num2}}
						</view>
					</view>
					<view class="huiyaunshuIt">
						<p>{{$t('instruPanel.title9')}}</p>
						<view class="huiyaunshuItNum">
							{{vipinfo.invite_num}}
						</view>
					</view>
				</view>
				<view class="shujutongjiBox">
					<image :src="vipinfo.poster_path" alt=""></image>
					<view class="lianjieBox">
						<view>{{$t('instruPanel.title10')}} {{vipinfo.domain}}</view>
						<image src="../../static/images/copy.png" mode=""
							@click="copys(vipinfo.domain)"></image>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="yonghuziliaoBox">
			{{$t('instruPanel.title3')}}
		</view>
		<view class="zongpaiming">
			<view class="paimingTitle">
				{{$t('instruPanel.title11')}}
			</view>
			<view class="paimingForm paimingFormTow">
				<view class="paimingFormIt">
					{{$t('instruPanel.title12')}}
				</view>
				<view class="paimingFormIt">
					{{$t('instruPanel.title13')}}
				</view>
				<view class="paimingFormIt">
					{{$t('instruPanel.title14')}}
				</view>
				<view class="paimingFormIt">
					{{$t('instruPanel.title15')}}
				</view>
				<view class="paimingFormIt">
					{{$t('instruPanel.title16')}}
				</view>
				<view class="paimingFormIt">
					{{$t('instruPanel.title17')}}
				</view>
			</view>
			<view class="paimingForm">
				<view class="paimingFormIt">
					{{myranklist.team}}
				</view>
				<view class="paimingFormIt">
					{{myranklist.vip1}}
				</view>
				<view class="paimingFormIt">
					{{myranklist.vip2}}
				</view>
				<view class="paimingFormIt">
					{{myranklist.vip3}}
				</view>
				<view class="paimingFormIt">
					{{myranklist.rank}}
				</view>
				<view class="paimingFormIt">
					{{item.team}}
				</view>
			</view>
			<view style="width: 100%;text-align: center;margin-top: 30rpx;" v-if="myranklist.length == 0">
				<image src="../../static/img/empty.png" style="width: 50px;height: 50px;"></image>
				<p> {{$t('first.title44')}}</p>
			</view>
		</view> -->
		<view class="yonghuziliaoBox">
			{{$t('instruPanel.title28')}}
		</view>
		<view class="gaikuangBox">
			<view class="gaikugBoxLeft">
				<view class="dsfTop">
					<view class="zilTopLTop">
						<p>{{$t('instruPanel.title3')}}</p>
						<image src="../../static/images/49.png" alt=""></image>
						<p @click="getShowTime" v-if="!showTime&&!startTime&&!endTime">请选择时间范围</p>
						<u-calendar :show="showTime" monthNum="24" minDate="2023-01-01" maxDate="2025-01-01" v-if="showTime" :mode="mode" @confirm="confirm" @close="close"></u-calendar>
						<p @click="getShowTime" v-if="!showTime&&startTime&&endTime">{{startTime}}-{{endTime}}</p>
					</view>
					<view class="dsfTopRight">
						<p>{{$t('instruPanel.title18')}}</p>
						<p>{{(Number(staticlist[0]) + Number(staticlist[1]) + Number(staticlist[2]) + Number(staticlist[3])).toFixed(2)}} USD</p>
					</view>
				</view>
				<!-- <view class="dsfBot">
					<view class="dsfBotLeft">
						<image src="../../static/images/76.png" alt=""></image>
						<p>{{$t('instruPanel.title19')}}</p>
					</view>
					<view class="dsfBotRight">
						<p>0.00 {{$t('instruPanel.title20')}}</p>
					</view>
				</view> -->
				<view class="dsfBot">
					<view class="dsfBotLeft">
						<image src="../../static/images/76.png" alt=""></image>
						<p>{{$t('instruPanel.title21')}}</p>
					</view>
					<view class="dsfBotRight">
						<p>{{staticlist[0]}} USD</p>
					</view>
				</view>
				<view class="dsfBot">
					<view class="dsfBotLeft">
						<image src="../../static/images/76.png" alt=""></image>
						<p>{{$t('instruPanel.title22')}}</p>
					</view>
					<view class="dsfBotRight">
						<p>{{staticlist[1]}} USD</p>
					</view>
				</view>
				<view class="dsfBot">
					<view class="dsfBotLeft">
						<image src="../../static/images/76.png" alt=""></image>
						<p>{{$t('instruPanel.title23')}}</p>
					</view>
					<view class="dsfBotRight">
						<p>{{staticlist[2]}} USD</p>
					</view>
				</view>
				<view class="dsfBot">
					<view class="dsfBotLeft">
						<image src="../../static/images/76.png" alt=""></image>
						<p>{{$t('instruPanel.title24')}}</p>
					</view>
					<view class="dsfBotRight">
						<p>{{staticlist[3]}} USD</p>
					</view>
				</view>
				<!-- <view class="gaikugBoxRightBut">
					{{$t('instruPanel.title25')}}
				</view> -->
			</view>
		</view>

		<view class="conTitOneTit">
			<!-- · {{$t('activityTitle.title5')}} · -->
		</view>
		<view class="tishiBox">
			<view class="tishiBoxIt">
				<!-- <image src="../../static/images/59.jpg" alt=""></image> -->
				<view class="tishiBoxItText">
					<view class="tishiBoxItTextTit">
						<view class=""></view>
						<p>{{$t('activityTitle.title6')}}</p>
					</view>
					<view class="tishiBoxItTextCon">
						{{$t('activityTitle.title7')}}
					</view>
				</view>
			</view>
			<view class="tishiBoxIt">
				<view class="tishiBoxItText">
					<view class="tishiBoxItTextTit">
						<view class=""></view>
						<p>{{$t('activityTitle.title8')}}</p>
					</view>
					<view class="tishiBoxItTextCon">
						{{$t('activityTitle.title9')}}
					</view>
				</view>
				<!-- <image src="../../static/images/60.jpg" alt=""></image> -->
			</view>
		</view>
		<view class="conSix">
			<p>{{$t('indexTitle.title24')}}</p>
			<!-- <view class="conSixText">
				<p>{{$t('indexTitle.title25')}}</p>
				<p>{{$t('indexTitle.title26')}}</p>
			</view> -->
		</view>
		<!-- <p class="buttomBoxbut">{{$t('indexTitle.title27')}}</p> -->
		<!-- <view class="bottomTextBox">
			{{$t('indexTitle.title28')}}
		</view> -->

		<view class="notice" v-if="loginout">
			<view class="loginoutbox">
				<view class="lbtitle">{{$t('login.title36')}}</view>
				<view class="lbtitle1">{{$t('login.title37')}}</view>
				<view class="lbbtns">
					<view class="lbbtn1" @click="loginout = false">{{$t('login.title38')}}</view>
					<view class="lbbtn2" @click="logout()">{{$t('login.title39')}}</view>
				</view>
			</view>
		</view>
		<view class="kefu" @click="gokefu">
			<image src="../../static/images/telegram.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		domains
	} from '../../config/domain.js'
	export default {
		components: {},
		data() {
			return {
				customStyleOne: {
					background: '#fdd02e !important',
					color: '#fff !important',
					border: 'none !important',
					fontSize: '12px !important',
					marginBottom: '5px !important',
				},
				customStyleTow: {
					background: '#5fb4fb !important',
					color: '#fff !important',
					fontSize: '12px !important',
					border: 'none !important',
					marginBottom: '5px !important',
				},
				customStyleThree: {
					background: '#5fb4fb !important',
					color: '#fff !important',
					fontSize: '12px !important',
					border: 'none !important',
					marginBottom: '5px !important',
					marginLeft: '5px !important',
				},
				navList: [{
						'title': this.$t('indexTitle.title29'),
						"img": '../../static/images/3.png',
						"path": '../index/index'
					},
					{
						'title': this.$t('indexTitle.title30'),
						"img": '../../static/images/19.png',
						"path": '../activity/index'
					},
					{
						'title': this.$t('indexTitle.title31'),
						"img": '../../static/images/17.png',
						"path": '../configuration/index'
					},
					{
						'title': this.$t('indexTitle.title33'),
						"img": '../../static/images/15.png',
						"path": '../recharge/record'
					},
					{
						'title': this.$t('indexTitle.title34'),
						"img": '../../static/images/13.png',
						"path": '../vipStructure/vipStructure'
					},
					{
						'title': this.$t('indexTitle.title36'),
						"img": '../../static/images/9.png',
						"path": '../myPlatform/downloadPlatform'
					},
					{
						'title': this.$t('indexTitle.title32'),
						"img": '../../static/images/5.png',
						"path": '../userProfile/index'
					},
					{
						'title': this.$t('indexTitle.title35'),
						"img": '../../static/images/7.png',
						"path": '../recentNews/index'
					},
					// {
					// 	'title': this.$t('indexTitle.title37'),
					// 	"img": '../../static/images/11.png',
					// 	"path": '../ranking/index'
					// },
				],
				show2: false,
				value: '',
				navItShow: 0,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 2
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				info: [],
				loginout: false,
				balance: [],
				showTime: false,
				mode: 'range',
				startTime:"",
				endTime:"",
				vipinfo:[],
				myranklist:[],
				staticlist:[],
				kefuurl:''
			};
		},
		onLoad() {
			this.info = uni.getStorageSync('info')
			this.getkefu()
		},
		onReady() {},
		onShow() {
			this.getbalance()
			this.getvip()
			this.getmyrank()
			this.getshouyi()
		},
		methods: {
			getkefu(){
				let url = domains + 'api/default/setting?key=sign_kefu';
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Lang': uni.getStorageSync('lang'),
						'authorization': uni.getStorageSync('tokenNum')
					},
					success: res => {
						if (res.data.code == 0) {
							this.kefuurl = res.data.data
						} else {
							uni.showToast({ //提示
								icon: 'none',
								title: res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			gokefu(){
				window.open(this.kefuurl)
			},
			getShowTime(){
				this.showTime= true;
			},
			confirm(e) {
				console.log(e);
				this.startTime=e[0];
				this.endTime=e[e.length-1]
				this.showTime=false;
				this.getshouyi()
			},
			close(e){
				this.showTime=false;
			},
			getbalance() {
				let url = domains + 'api/balance';
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Lang': uni.getStorageSync('lang'),
						'authorization': uni.getStorageSync('tokenNum')
					},
					success: res => {
						if (res.data.code == 0) {
							this.balance = res.data.data
						} else {
							uni.showToast({ //提示
								icon: 'none',
								title: res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			getvip(){
				let url = domains + 'api/user/partnerInfo';
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'authorization':uni.getStorageSync('tokenNum')
					},
					success: res => {
						if(res.data.code == 0){
							this.vipinfo = res.data.data
							this.getServerData()
						}else{
							uni.showToast({//提示
								icon:'none',
								title:res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			getmyrank(){
				let url = domains + 'api/user/myrank';
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'authorization':uni.getStorageSync('tokenNum')
					},
					success: res => {
						if(res.data.code == 0){
							this.myranklist = res.data.data
						}else{
							uni.showToast({//提示
								icon:'none',
								title:res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			getshouyi(){
				let url = domains + 'api/user/userstatic';
				let mytype = 'get';
				let data = {
					start:this.startTime,
					end:this.endTime
				};
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'authorization':uni.getStorageSync('tokenNum')
					},
					success: res => {
						if(res.data.code == 0){
							this.staticlist = res.data.data
						}else{
							uni.showToast({//提示
								icon:'none',
								title:res.data.msg
							})
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			copys(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: this.$t('first.title115')
						})
					}
				});
			},
			islogin() {
				if (this.info) {
					// this.loginout = true;
				} else {
					uni.showToast({ //提示
						icon: 'none',
						title: this.$t('login.title35')
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/newlogin'
						})
					}, 1500)
				}
			},
			loginouts(){
				this.loginout = true;
			},
			logout() {
				uni.removeStorage({
					key: 'token'
				})
				uni.removeStorage({
					key: 'tokenNum'
				})
				uni.removeStorage({
					key: 'info'
				})
				uni.showToast({ //提示
					icon: 'none',
					title: this.$t('login.title40')
				})
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/newlogin'
					})
				}, 1500)
				this.loginout = false
			},
			gorecord(e){
				uni.navigateTo({
					url: '/pages/recharge/record?tab=' + e
				})
			},
			govip() {
				uni.navigateTo({
					url: '/pages/vipStructure/vipStructure'
				})
			},
			gozhuanzhang(e){
				uni.navigateTo({
					url:'/pages/recharge/transfer?type=' + e
				})
			},
			gotixian(e){
				uni.navigateTo({
					url:'/pages/recharge/withdraw?type=' + e
				})
			},
			gocunkuan() {
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				})
			},
			open2() {
				this.show2 = !this.show2
			},
			lang(e) {
				this.$i18n.locale = e;
				localStorage.setItem('lang', e);
				this.show2 = false;
				this.navList = [{
						'title': this.$t('indexTitle.title29'),
						"img": '../../static/images/3.png',
						"path": '../index/index'
					},
					{
						'title': this.$t('indexTitle.title30'),
						"img": '../../static/images/19.png',
						"path": '../activity/index'
					},
					{
						'title': this.$t('indexTitle.title31'),
						"img": '../../static/images/17.png',
						"path": '../configuration/index'
					},
					{
						'title': this.$t('indexTitle.title33'),
						"img": '../../static/images/15.png',
						"path": '../recharge/record'
					},
					{
						'title': this.$t('indexTitle.title34'),
						"img": '../../static/images/13.png',
						"path": '../vipStructure/vipStructure'
					},
					{
						'title': this.$t('indexTitle.title36'),
						"img": '../../static/images/9.png',
						"path": '../myPlatform/downloadPlatform'
					},
					{
						'title': this.$t('indexTitle.title32'),
						"img": '../../static/images/5.png',
						"path": '../userProfile/index'
					},
					{
						'title': this.$t('indexTitle.title35'),
						"img": '../../static/images/7.png',
						"path": '../recentNews/index'
					},
				]
				this.$emit("toTime", "我来自子组件")
			},
			goPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			switchLang() {
				uni.navigateTo({
					url: ''
				})
			},
			change(e) {
				console.log('change', e);
			},
			cutNavIt(num) {
				this.navItShow = num
			},
			getServerData() {
				let that = this;
				let res = {
					categories: [],
					series: [{
							name: that.$t('instruPanel.title26'),
							data: []
						},
						{
							name: that.$t('instruPanel.title27'),
							data: []
						}
					]
				};
				for(let i = 0;i < that.vipinfo.months.length;i++){
					res.categories.push(that.vipinfo.months[i][0])
					res.series[0].data.push(that.vipinfo.months[i][1])
					res.series[1].data.push(that.vipinfo.months[i][2])
				}
				this.chartData = JSON.parse(JSON.stringify(res));
			},
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.charts-box {
		width: 100%;
		height: 250px;
	}

	.conTitOneTit {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #000;
		margin: 20px 0px 10px;
	}

	.conTitOneTit span {
		padding-bottom: 10rpx;
		margin-right: 40rpx;
		border-bottom: 4rpx solid transparent;
	}

	.conTitOneTit span:last-child {
		margin-right: 0;
	}

	.conTitOneTit span.color {
		color: #5cb9ff;
		border-color: #5cb9ff;
	}
.sjhsuid{
		position: absolute;
		top: 42px;
		right: 50px;
	}
	.indexHeaBox {
		width: 100%;
		height: 180px;
		background-image: url('../../static/images/84.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		font-size: 12px;
		color: #fff;
		justify-content: space-between;
		padding: 10px 15px;
	}

	.leftImg {
		height: 40px;
		display: flex;
		align-items: center;

		image {
			width: 25px;
			height: 25px;
			margin-right: 5px;
		}
	}

	.rightImg {
		display: flex;
		height: 40px;
		align-items: center;

		image:first-child {
			width: 16px;
			height: 18px;
			margin-right: 5px;
		}
		
		image:last-child {
			width: 18px;
			height: 18px;
		}
		
		.logout{
			width: 40rpx !important;
			margin-left: 10rpx;
		}

		.rightImgLine {
			width: 1px;
			background-color: #fff;
			height: 20px;
			margin: 0px 5px;
		}

		.rightImgName {
			padding: 2px 5px;
			background-color: #6aa3ea;
			color: #000;
		}
	}

	.indexNav {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 15px 0 10px;

		.indexNavIt {
			width: 25%;
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 14px;
			color: #333;
			margin-bottom: 10px;
			text-align: center;
		
			image {
				width: 20px;
				height: 18px;
				margin-bottom: 10px;
			}
		}
		
		.indexNavIt:nth-child(5) image {
			width: 22px;
		}
		
		.indexNavIt:nth-child(9) image {
			height: 21px;
		}
	}

	.conLineBox {
		width: 100%;
		height: 7px;
		background-color: #ededed;
	}

	.conBox {
		width: 100%;
		padding: 10px 15px 20px;
		margin-top: 10px;
	}

	.conOne {
		background-color: #f1f3ff;
		border-radius: 5px;
	}

	.conSix {
		padding: 40px 20px 30px;
		margin-top: 40px;
		background-image: url('../../static/images/58.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.conSix>p:nth-child(1) {
		font-size: 13px;
		font-weight: 600;
		color: #fff;
	}

	.buttomBoxbut {
		width: 300px;
		margin: 30px auto;
		text-align: center;
		line-height: 30px;
		height: 30px;
		font-size: 14px;
		color: #fff;
		cursor: pointer;
		background-color: #fed136;
		border-radius: 30px;
	}

	.conSixText {
		margin: 20px 0px 0;
		text-align: center;
		font-size: 13px;
		color: #fff;
	}


	.conSixText p {
		margin-bottom: 10px;
	}

	.bottomTextBox {
		text-align: center;
		font-size: 12px;
		color: #333;
		margin: 10px 0;
	}


	.conNavOneItRiButs {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0px auto 10rpx;
	}

	.conThree {
		width: 95%;
		margin: 10px auto 0;
	}

	.lineBox {
		position: absolute;
		width: 60px;
		height: 2px;
		background-color: #6c83bf;
		bottom: -5px;
		left: 0;
	}

	.tongjiBox {
		width: 95%;
		margin: 0 auto;
	}

	.tongjiBoxTitle {
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
	}
.linehjghj {
		width: 15%;
		margin: 0px auto 20px;
		height: 5px;
		border-radius: 10px;
		background-color: #eaeaea;
	}

	.lineLeft {
		width: 50%;
		border-radius: 10px;
		height: 5px;
		background-color: #277af5;
	}

	.tongjiNav {
		width: 100%;
		margin: 20px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.conNavOneItdada {
		width: 32.5%;
		margin-bottom: 5px;
		border-radius: 10px;
		padding: 10px 8px;
		background-color: #938ced;
		font-size: 12px;
		color: #fff;
	}
	.conNavOneItRiBut {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.conNavOneItdada img {
		width: 30px;
		height: 26px;
		margin-right: 5px;
	}

	.conNavOneItRi p {
		margin: 0;
		text-align: left;
	}

	.conNavOneItRi p:nth-child(2) {
		// color: #5eb7fa;
		margin: 2px 0px;
		font-weight: 600;
	}

	.mask2 {
		position: fixed;
		top: 90rpx;
		left: 30rpx;
		z-index: 99;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
	}

	.mask2 img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}


	.mask2 view {
		display: flex;
		color: #000;
		align-items: center;
		margin: 20rpx;
	}

	.tishiBox {
		width: 85%;
		margin: 0px auto;
	}

	.tishiBoxIt {
		// display: flex;
		border-radius: 3px;
		// align-items: center;
		width: 100%;
		margin: 20px 0 0px;
		box-shadow: #e1e9fb 1.95px 1.95px 5px;
	}

	.tishiBoxIt image {
		width: 100%;
		height: 350px;
	}

	.tishiBoxItText {
		width: 100%;
		// height: 350px;
		background-color: #fff;
		padding: 15px 10px 20px 10px;
	}

	.tishiBoxItTextTit {
		display: flex;
		align-items: center;
		font-size: 17px;
		color: #238bdf;
		font-weight: 600;
	}

	.tishiBoxItTextTit>view {
		width: 3px;
		height: 25px;
		background-color: #238bdf;
		margin-right: 5px;
	}

	.tishiBoxItTextCon {
		// padding: 10px 0px 0px 20px;
		font-size: 14px;
		color: #333;
		margin-top: 10px;
		line-height: 30px;
		text-align: left;
	}



	.yonghuziliaoBox {
		width: 100px;
		height: 23px;
		margin-top: 20px;
		font-size: 15px;
		color: #fff;
		margin-left: 10px;
		background-image: url('../../static/images/64.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;
		line-height: 23px;
	}

	.ziliaoBox {
		width: 100%;
	}

	.zilTop {
		width: 93%;
		display: flex;
		align-items: center;
		margin: 0px auto;
	}

	.zilTopL {
		width: 70%;
		margin: 10px 0px;
		height: 300px;
		color: #000;
		padding: 15px;
		border-radius: 5px 0px 0px 5px;
		/* box-shadow: #e1e9fb 1.95px 1.95px 5px; */
		background-color: #f1f3ff;
	}

	.zilTopLTop {
		display: flex;
		align-items: center;
		color: #000;
		font-size: 15px;
	}

	.zilTopLTop image {
		width: 15px;
		height: 18px;
		margin: 0px 5px;
	}

	.zilTopLTop p:nth-child(3) {
		color: #a6a6a6;
		font-size: 13px;
	}

	.zilTopL p,
	.zilTopR p,
	.zilTopLTop p,
	.zilTopTow p,
	.zilTopRIt p,
	.dsfBot p {
		margin: 0px;
	}

	.zilTopLBot {
		width: 100%;
		height: 400px;
	}

	.zilTopR {
		width: 30%;
	}

	.zilTopRIt {
		width: 100%;
		height: 100px;
		border-radius: 0px 5px 5px 0px;
		background-color: #0097ff;
		color: #fff;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.zilTopRIt p:nth-child(2) {
		margin-top: 5px;
		font-size: 12px;
	}

	.zilTopRIt:nth-child(2) {
		background-color: #938bfb;
	}

	.zilTopRIt:nth-child(3) {
		background-color: #fecb94;
	}

	.zilTopTow {
		width: 100%;
		height: 150px;
		background-image: url('../../static/images/4.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-shadow: #e1e9fb 1.95px 1.95px 5px;
		padding: 30px 20px 20px 30px;
		font-size: 30px;
		color: #000;
	}

	.zilTopBot {
		font-size: 13px;
		color: #7ec7fe;
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.zilTopBotLine {
		width: 300px;
		height: 3px;
		background-color: #7ec7fe;
		margin-right: 5px;
	}

	.shujutongjiBox {
		height: 180px;
		padding: 0px 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.shujutongjiBox>image {
		width: 100px;
		height: 100px;
	}

	.lianjieBox {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: #333;
		margin-top: 10px;
	}
	.lianjieBox view{
		flex: 1;
		word-break:break-all;
		margin-right: 20rpx;
	}
	.lianjieBox image {
		width: 22px;
		height: 22px;
		cursor: pointer;
	}

	.zilBot {
		width: 93%;
		margin: 10px auto;
		background-color: #f1f3ff;
		border-radius: 5px;
		padding: 20px 0px 0px 20px;
	}

	.huiyaunshu {
		width: 100%;
		font-size: 13px;
		color: #000;
		display: flex;
		margin-top: 20px;
		align-items: center;
	}

	.huiyaunshuIt {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.huiyaunshuItNum {
		padding: 5px 15px;
		text-align: center;
		margin-left: 5px;
		background-color: #fff;
		border: 1px solid #d8d8d8;
	}

	.zongpaiming {
		width: 93%;
		background-color: #f1f3ff;
		border-radius: 5px;
		padding: 15px;
		margin: 10px auto;
	}

	.paimingTitle {
		font-size: 18px;
		color: #000;
		font-weight: 600;
	}

	.paimingForm {
		width: 100%;
		display: flex;
		height: 35px;
		margin-top: 10px;
		font-size: 12px;
		align-items: center;
	}

	.paimingFormTow {
		background-color: #278cf4;
		color: #fff;
	}

	.paimingFormIt {
		flex: 1;
		text-align: center;
	}

	.paimingForm:nth-child(2) .paimingFormIt:nth-child(1) {
		width: 20%;
		border-right: 1px solid #fff;
	}

	.paimingForm:nth-child(3) .paimingFormIt {
		color: #278cf4;
	}

	.paimingForm:nth-child(3) .paimingFormIt:nth-child(1) {
		color: #333;
	}

	.gaikuangBox {
		width: 93%;
		margin: 20px auto 0px;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
	}

	.gaikugBoxLeft {
		width: 100%;
		background-color: #f1f3ff;
		border-radius: 5px;
		padding: 30px 20px 20px;
	}

	.dsfTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dsfTopRight {
		display: flex;
		align-items: center;
		color: #2594f3;
		font-size: 12px;
	}

	.dsfTopRight p:nth-child(2) {
		padding: 2px 10px;
		color: #fff;
		border-radius: 10px;
		background-color: #2594f3;
		margin-left: 5px;
	}

	.dsfBot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 10px;
		font-size: 12px;
		color: #949494;
		margin: 13px 0px 0px;
	}

	.dsfBotLeft {
		color: #000;
		display: flex;
		align-items: center;
	}

	.dsfBotLeft image {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.gaikugBoxRightBut {
		width: 100px;
		color: #000;
		border: 1px solid #000;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		border-radius: 5px;
		margin: 20px auto 0;
	}

	.notice {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1111;
		background-color: rgba(0, 0, 0, .4);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.loginoutbox {
		width: 80%;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.lbtitle {
		width: 100%;
		height: 100rpx;
		font-size: 16px;
		line-height: 100rpx;
		text-align: center;
	}

	.lbtitle1 {
		width: 100%;
		height: 100rpx;
		font-size: 14px;
		line-height: 100rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.lbbtns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50rpx;
		margin-bottom: 40rpx;
	}

	.lbbtn1 {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 14px;
		color: #000;
		background-color: #f0f0f0;
	}

	.lbbtn2 {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 14px;
		color: #fff;
		background-color: #238bdf;
	}
	.kefu{
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 15%;
		right: 20rpx;
		z-index: 1000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>